document.addEventListener('DOMContentLoaded', function() {
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    var w = focus.offsetWidth;

    var index = 0;
    var timer = setInterval(() => {
        index++;
        var translateX = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translateX + 'px)';

        // console.log(translateX);
    }, 2000);

    ul.addEventListener('transitionend', function() {
        if (index >= 2) {
            index = 0;
            var translateX = -index * w;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        } else if (index < 0) {
            index = 2;
            var translateX = -index * w;
            ul.style.transition = 'none';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }

        // 
        // ol.querySelector('.current').classList.remove('current');
        // ol.children[index].classList.add('current');
        ol.querySelector('.current').classList.remove('current');
        // 让当前索引号 的小li 加上 current   add
        ol.children[index].classList.add('current');
    })

    // 手指滑动轮播图
    var startX = 0;
    var moveX = 0;
    ul.addEventListener('touchstart', function(e) {
        startX = e.targetTouches[0].pageX;
        clearInterval(timer);
    });
    ul.addEventListener('touchmove', function(e) {
        moveX = e.targetTouches[0].pageX - startX;

        var translateX = -index * w + moveX;
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translateX + 'px)';
        e.preventDefault();
    });
    ul.addEventListener('touchend', function(e) {
        if (Math.abs(moveX) > 50) {
            if (moveX > 0) {
                index--;
            } else {
                index++;
            }

            var translateX = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        } else {
            var translateX = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translateX + 'px)';
        }

        // 手指离开的时候就重新开启定时器
        clearInterval(timer);
        timer = setInterval(function() {
            index++;
            var translatex = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }, 2000);
    });

    // 页面滚动事件
    var searchBox = document.querySelector('.search-index');

    var nav = document.querySelector('.local-nav');
    var goback = document.querySelector('.goback');

    window.addEventListener('scroll', function() {
        // console.log(window.pageYOffset);
        if (window.pageYOffset >= 80) {
            // searchBox.style.backgroundColor = '#fff';

            searchBox.classList.add('search-index-fixed');
        } else {
            // searchBox.style.backgroundColor = 'transparent';

            searchBox.classList.remove('search-index-fixed');
        }

        if (window.pageYOffset >= nav.offsetTop) {
            goback.style.display = 'block';
        } else {
            goback.style.display = 'none';

        }

    })

    goback.addEventListener('click', function() {
        window.scroll(0, 0);
    })


})